<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.w3.org/1999/xhtml">
<head>
    <th:block th:include="include :: header('配置标准')"/>
    <th:block th:include="include :: select2-css"/>
    <style>
        .active {
            background: #1890ff;
            color: #fff !important;
        }
    </style>
</head>
<body>
<div class="ibox-title">
    <h5 th:text="${ncStandard.standardName}"></h5>
</div>


<div class="container-div">

    <div class="row">

        <form id="formId">
            <input name="stageId" id="stageId" type="hidden"/>
        </form>
        <div class="col-sm-12">
            <div class="btn-group stage-div">

            </div>
            <a class="btn btn-success" onclick="addStage()" shiro:hasPermission="system:ncStage:add">
                <i class="fa fa-plus"></i> 添加阶段
            </a>
        </div>


        <div class="btn-group-sm" id="toolbar" role="group">
            <a class="btn btn-success add-work" shiro:hasPermission="system:ncWork:add">
                <i class="fa fa-plus"></i> 添加农事
            </a>
        </div>
        <div class="col-sm-12 select-table table-striped">
            <table id="bootstrap-table" data-mobile-responsive="true"></table>
        </div>
    </div>
</div>

<!--<div class="row">
    <div class="col-sm-offset-5 col-sm-10">
         <button type="button" class="btn btn-sm btn-primary" onclick="submitHandler()"><i class="fa fa-check"></i>保 存
         </button>&nbsp;
        <button type="button" class="btn btn-sm btn-danger" onclick="closeItem()"><i class="fa fa-reply-all"></i>关 闭
        </button>
    </div>
</div>-->
<th:block th:include="include :: footer"/>
<th:block th:include="include :: select2-js"/>


<script th:inline="javascript">
    var stage_prefix = ctx + "system/ncStage";
    var stage_list = stage_prefix + "/list",
        stage_createUrl = stage_prefix + "/add",
        stage_updateUrl = stage_prefix + "/edit/",
        stage_removeUrl = stage_prefix + "/remove";

    var standardId = [[${ncStandard.standardId}]];
    var stageId;

    $(function () {
        loadStages();
    });

    /*添加阶段*/
    function addStage() {
        /*title, url, width, height, callback*/
        $.modal.open("添加阶段", stage_createUrl + "?standardId=" + standardId, null, null, null, function () {
            location.reload();
        });
    }

    /*修改阶段*/
    function editStage(stageId) {
        /*title, url, width, height, callback*/
        $.modal.open("修改阶段", stage_updateUrl + "" + stageId, null, null, null, function () {
            location.reload();
        });
    }

    /*删除阶段*/
    function removeStage(stageId) {
        $.modal.confirm("确定删除吗？", function () {
            var data = {"ids": stageId};
            $.operate.submit(stage_removeUrl, "post", "json", data, function () {
                location.reload();
            });
        });

    }


    //加载阶段
    function loadStages() {
        $.ajax({
            cache: true,
            type: "POST",
            url: stage_list,
            data: {
                "standardId": standardId
            },
            async: false,
            error: function (request) {
                $.modal.alertError("系统错误");
            },
            success: function (data) {
                if (data.code == 0) {
                    $('#stages-div').html('');
                    if (data.rows && data.rows.length > 0) {
                        var html = '';
                        $(data.rows).each(function (i, e) {
                            html += '<div class="mr5 inline bg-info">' +
                                '<div>' +
                                '<i class="fa fa-remove " style="float: left;margin: 5px"  onclick="removeStage(\'' + e.stageId + '\')"></i>' +
                                '<i class="fa fa-edit" style="float: right;margin: 5px" onclick="editStage(\'' + e.stageId + '\')"></i>' +
                                '</div>' +
                                '<button class="btn btn-white stage-btn" type="button" stageId="' + e.stageId + '">' +
                                e.stageName + '(' + e.stageDays + ')' +
                                '</button>' +
                                '</div>';
                        });
                        $('.stage-div').html(html);
                        $('.stage-btn').click(function () {
                            $('.stage-btn').removeClass("active")
                            $(this).addClass("active");

                            stageId = $(this).attr('stageId');
                            $('#stageId').val(stageId);
                            initWorks();
                        });
                        $('.stage-btn').eq(0).click().addClass("active");
                    } else {
                        initWorks()
                    }

                } else {
                    // $.modal.alertError(data.msg);
                }

            }
        });
    }


    var editFlag = [[${@permission.hasPermi('system:ncWork:edit')}]];
    var removeFlag = [[${@permission.hasPermi('system:ncWork:remove')}]];
    var prefix = ctx + "system/ncWork";

    var unitTypes = [[${@dict.getType('unitType')}]];
    var first = true;

    function initWorks() {
        // $.table.destroy();
        if (!first) {
            $.table.search();
            return
        }
        first = false;
        var options = {
                url: prefix + "/list",
                createUrl: prefix + "/add/{id}",
                updateUrl: prefix + "/edit/{id}",
                removeUrl: prefix + "/remove",
                exportUrl: prefix + "/export",
                modalName: "标准农事",
                showExport: true,
                queryParams: function queryParams(params) {
                    var search = $.table.queryParams(params);
                    search.stageId = (stageId ? stageId : -100);
                    return search;
                },
                columns: [{
                    checkbox: true
                },
                    {
                        field: 'workName',
                        title: '农事名称',
                        sortable: true
                    },
                    {
                        field: 'workType',
                        title: '农事类型',
                        formatter: function (value, row, index) {
                            if (value == 1) {
                                return "栽培";
                            } else if (value == 2) {
                                return "农资";
                            } else {
                                return '--';
                            }
                        }
                    },
                    {
                        field: 'cycleDays',
                        title: '循环周期(天)',
                        sortable: true
                    },
                    {
                        field: 'workStart',
                        title: '第几天开始',
                        sortable: true
                    },
                    {
                        field: 'workEnd',
                        title: '第几天结束',
                        sortable: true
                    },
                    {
                        field: 'isDynamic',
                        title: '动态调整',
                        formatter: function (value, row, index) {
                            if (value == 1) {
                                return "是";
                            } else {
                                return '否';
                            }
                        }
                    },
                    {
                        field: 'inputCn',
                        title: '农资名称',
                        sortable: true
                    },
                    {
                        field: 'inputCount',
                        title: '数量/亩',
                        sortable: true
                    },
                    {
                        field: 'inputUnit',
                        title: '单位',
                        sortable: true,
                        formatter: function (value, row, index) {
                            return $.table.selectDictLabel(unitTypes, value);
                        }
                    },
                    {
                        field: 'remark',
                        title: '备注',
                        formatter: function (value, row, index) {
                            return $.table.tooltip(value);
                        }
                    },
                    {
                        title: '操作',
                        align: 'center',
                        formatter: function (value, row, index) {
                            var actions = [];
                            actions.push('<a class="btn btn-success btn-xs ' + editFlag + '" href="javascript:void(0)" onclick="$.operate.edit(\'' + row.workId + '\')"><i class="fa fa-edit"></i>编辑</a> ');
                            actions.push('<a class="btn btn-danger btn-xs ' + removeFlag + '" href="javascript:void(0)" onclick="$.operate.remove(\'' + row.workId + '\')"><i class="fa fa-remove"></i>删除</a>');
                            return actions.join('');
                        }
                    }]
            }
        ;
        $.table.init(options);

    }

    $('.add-work').click(function () {
        if (stageId) {
            $.operate.add(stageId);
        } else {
            layer.msg('请选择阶段');
        }
    });
    setTitle("配置周期", true)
</script>
</body>
</html>